<template>
    <div class="my">
       <div class="top-img">
        <img class="auto-img" src="https://p2.qhimg.com/t013dd875d303717d58.png" alt="">
        <div class="top-img-content">
            <div class="setup" @click="clickShezhi">
                <img class="auto-img aaa" src="https://p1.qhimg.com/t012ad1a6111aa595a5.png" alt="">
            </div>
            <div class="top-title">
                <div class="title-img">
                    <img class="auto-img" src="	https://p1.ssl.qhmsg.com/dm/48_48_100/t01923d359dad425928.jpg" alt="">
                </div>
                <div class="title-content">
                    <div class="title-number">
                        <div class="number">{{bookID}}</div>
                        <div class="title-name">
                            <div class="name-img">
                                <img class="auto-img" src="https://p1.ssl.qhimg.com/t01281d7cacc3c8b2e2.png" alt="">
                            </div>
                            <div class="name-title">青铜</div>
                        </div>
                    </div>
                    <div class="title-footer">
                        <div class="footer-jifen">积分222 ></div>
                        <div class="footer-changzhang">成长值100 ></div>
                    </div>
                </div>
            </div>


        </div>
       </div>
       <div class="huiyuan">
        <div class="hui-title">
            <div class="hui-rop">360黑金会员</div>
            <div class="hui-white">开通黑金会员免费送智能设备</div>
        </div>
        <div class="current-title">立即开通</div>
       </div>

       <div class="MyOrder">
        <div class="MyOrder-title">
            <div class="My-name">我的订单</div>
            <div class="My-total" @click="clickTotal">全部></div>
        </div>
        <div class="MyOrder-conetnt">
            <div class="MyOrder-item" v-for="(item,index) in MyRrderData" :key="index" @click="clickToBePaid">
                <div class="item-img">
                    <img class="auto-img" :src="item.img" alt="">
                </div>
                <div class="item-content">{{item.name}}</div>
            </div>
            <!-- 退换货 -->
            <div class="MyOrder-item" @click="clicktuihuan">
                <div class="item-img">
                    <img class="auto-img" src="../assets/daituihuo.png" alt="">
                </div>
                <div class="item-content">退换货</div>
            </div>

        </div>
       </div>
       <div class="MyOrder-footer">
        <!-- 收藏 -->
        <div class="footer-item" @click="clickCollection">
            <div class="footer-img">
                <img class="auto-img a" src="https://p3.ssl.qhimg.com/t011292b0518f1e5143.png" alt="">
            </div>
            <div class="footer-name">我的收藏</div>
        </div>
        <!-- 优惠卷 -->
        <div class="footer-item" @click="clickCoupon">
            <div class="footer-img">
                <img class="auto-img a" src="https://p2.ssl.qhimg.com/t01f6cc58503da6329e.png" alt="">
            </div>
            <div class="footer-name">我的优惠券</div>
        </div>
        <!-- 优惠卷 -->
        <div class="footer-item" @click="clickCollection">
            <div class="footer-img">
                <img class="auto-img a" src="https://p3.ssl.qhimg.com/t01e0fd297d58a04847.png" alt="">
            </div>
            <div class="footer-name">我的积分</div>
        </div>
        <!-- 优惠卷 -->
        <div class="footer-item" @click="clickShipToAddress">
            <div class="footer-img">
                <img class="auto-img a" src="https://p5.ssl.qhimg.com/t01d5be07b4d61ac25e.png" alt="">
            </div>
            <div class="footer-name">地址管理</div>
        </div>
        <!-- 优惠卷 -->
        <div class="footer-item" @click="clickCollection">
            <div class="footer-img">
                <img class="auto-img a" src="https://p1.ssl.qhimg.com/t0168244e4c84c9b7ee.png" alt="">
            </div>
            <div class="footer-name">意见反馈</div>
        </div>
        <!-- 优惠卷 -->
        <div class="footer-item" @click="clickCollection">
            <div class="footer-img">
                <img class="auto-img a" src="https://p3.ssl.qhimg.com/t01265ba98a5717a1f1.png" alt="">
            </div>
            <div class="footer-name">资质</div>
        </div>
       </div>
    </div>
</template>

<script>
    export default {
        name:"My",
        data() {
            return {

                
                MyRrderData:[
                    {
                        name:"待付款",
                        img: require("../assets/daifukuan.png")
                    },
                    {
                        name:"待发货",
                        img:require("../assets/daifahuo.png")
                    },
                    {
                        name:"待收货",
                        img:require("../assets/daishouhuo.png")
                    },
                    {
                        name:"待评价",
                        img:require("../assets/daipingjia.png")
                    },
                  
                ],
                //判断登录
                signin:'',
                bookID:0
               
            }
        },
        created() {
            this.clickbendiData();
        },

        methods:{
            //拿到本地存储的密码账号
            clickbendiData(){
                let bendiData =JSON.parse(localStorage.getItem("SigInID"));
                this.signin = bendiData
                console.log("这个是点击登录",this.signin);
                if(this.signin == null){
                    this.$router.push({name:"SignIn"})
                }
                bendiData.forEach(item => {
                    this.bookID =  item.bookID
                    
                });
                
            },
            //跳转到全部订单
            clickTotal(){
                this.$router.push({name:"ToBePaid"})
            },
            //跳转设置
            clickShezhi(){
                this.$router.push({name:"Shezhi"})
            },
            // 付款系列跳转
            clickToBePaid(){
                this.$router.push({name:"ToBePaid"})
            },
            //退换货跳转
            clicktuihuan(){
                this.$router.push({name:"ReturnAnd"})
            },
            //跳转收藏
            clickCollection(){
                this.$router.push({name:"Collection"})
            },
            //跳转优惠卷
            clickCoupon(){
                this.$router.push({name:"Coupon"})
            },
            //跳转收货地址
            clickShipToAddress(){
                this.$router.push({name:"ShipToAddress"})
            }
        }
    }
    
</script>

<style lang="scss" scoped>
.a{
    width: 35px;
    height: 35px;
}
.my{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f6f6f7;
}

.footer-img{
    width: 32px;
    margin-left: 28px;
    margin-bottom: 5px;
}
.MyOrder-footer{
    width: 95%;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid rgb(224, 223, 223);
    display: flex;
    flex-wrap: wrap;
    background-color: white;
}
.footer-item{
    margin-top: 20px;
    width: 88px;
    text-align: center;
    margin-bottom: 20px;
}
.MyOrder-item{
    width: 70px;
    text-align: center;
    margin-top: 18px;
}
.MyOrder-conetnt{
    display: flex;
}
.item-img{
    width: 28px;
    height: 28px;
    margin-left: 20px;
    margin-bottom: 5px;
     border-radius: 5px;
     overflow: hidden;
}
.MyOrder-title{
    height: 40px;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid rgb(210, 210, 210);
    .My-name{
        font-size: 16px;
    }
    .My-total{
        margin-left: auto;
        font-size: 16px;
    }
}


.MyOrder{
    width: 95%;
    height: 120px;
    margin: 10px auto;
    border: 1px solid rgb(217, 217, 217);
    border-radius: 10px;
    background-color: white;
    overflow: hidden;

}
.current-title{
    color: white;
    text-align: center;
    line-height: 25px;
    background-color: #eebd6b;
    border-radius: 15px;
    width: 80px;
    height: 25px;
    font-size: 16px;
    margin-left: auto;
}
.hui-white{
    color: #ae9bb5;
    margin-top: 5px;

}
.hui-rop{
    color: #eebd6b;
    font-size: 16px;
}
.huiyuan{
 display: flex;
border-radius: 10px;
background-color: #4d3d54;
height: 85px;
width: 95%;
margin: 0 auto;
position: fixed;
top: 130px;
left: 9px;
padding: 10px 15px;
box-sizing: border-box;
}
.footer-jifen,.footer-changzhang{
   margin-right: 10px;
   padding: 0 10px;
   background-color: #98325a;
   color: white;
   border-radius: 10px;
}
.title-footer{
    margin-top: 5px;
}
.name-img{
    width: 20px;
    height: 20px;
}
.name-title{
    color: white;
}
.number{
    font-size: 20px;
    color: white;
    margin-top: 5px;
}
.title-content{
    margin-left: 10px;
}
.title-footer{
    display: flex;
}
.title-name{
    display: flex;
    margin-left: 5px;
    height: 16px;
    margin-top: 8px;
    line-height: 16px;
}
.title-number{
    display: flex;
}
.top-title{
    margin-top: 20px;
}
.title-img{
    width: 53px;
    height: 53px;
    border: 1px solid #ffff;
    margin-left: 20px;
    border-radius: 50%;
    overflow: hidden;
}
.top-title{
    display: flex;
}
.setup{
    width: 20px;
    height: 20px;
    margin-left: 93%;

}
.top-img-content{
    height: 100px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    top: 5px;
}
.top-img{
    position: relative;
    margin-bottom: 50px;

}
*{
    padding: 0;
    margin: 0;
}

</style>